<h1>Blocks</h1>

<div class="centered-button-bar" *ngIf="(pageLiveObservable | async) === false">
  <button [disabled]="loadingObservable | async" mat-stroked-button
          aria-label="Show latest" (click)="gotoLatestItems()">
    Show latest
    <mat-icon>change_circle</mat-icon>
  </button>
</div>

<ng-container *ngIf="(blocks | async) as dataSource">
  <table mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="icon">
      <th mat-header-cell *matHeaderCellDef class="mat-cell--icon-cell"></th>
      <td mat-cell *matCellDef>
          <i class="fas fa-cube"></i>
      </td>
    </ng-container>

    <ng-container matColumnDef="number">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let block">
        <ng-container *ngIf="(block | async) as block">
          <a [routerLink]="$any(block).number.toString()">{{$any(block).number}}</a>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="age">
      <th mat-header-cell *matHeaderCellDef>Time</th>
      <td mat-cell *matCellDef="let block">
        <ng-container *ngIf="(block | async) as block">
          <time-ago [value]="$any(block).datetime"></time-ago>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="blockHash">
      <th mat-header-cell *matHeaderCellDef>Hash</th>
      <td mat-cell *matCellDef="let block">
        <div *ngIf="(block | async) as block" [title]="$any(block).hash">
          {{$any(block).hash}}
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="signedExtrinsics">
      <th mat-header-cell *matHeaderCellDef>Extrinsics</th>
      <td mat-cell *matCellDef="let block">
        <ng-container *ngIf="(block | async) as block">
          {{$any(block).extrinsics.length}}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="moduleEvents">
      <th mat-header-cell *matHeaderCellDef>Events</th>
      <td mat-cell *matCellDef="let block">
        <ng-container *ngIf="(block | async) as block">
          {{$any(block).events.length}}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="details">
      <th mat-header-cell *matHeaderCellDef class="mat-cell--details-link-cell"></th>
      <td mat-cell *matCellDef="let block">
        <ng-container *ngIf="(block | async) as block">
          <a [routerLink]="$any(block).number.toString()"><span class="material-icons">chevron_right</span></a>
        </ng-container>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="visibleColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: visibleColumns"></tr>

  </table>

  <div *ngIf="(loadingObservable | async) === false && dataSource.length === 0">
    <ng-container [ngSwitch]="pageLiveObservable | async">
      <ng-container *ngSwitchCase="true">
        No items. Waiting for new blocks.
      </ng-container>
      <ng-container *ngSwitchDefault>
        No items found.
      </ng-container>
    </ng-container>
  </div>

</ng-container>

<div *ngIf="loadingObservable | async">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

<div>
  <ng-container *ngIf="(hasNextPageObservable | async)">
    <button [disabled]="(loadingObservable | async)" mat-stroked-button aria-label="Next" (click)="loadMoreItems()">
      Show more <mat-icon>expand_more</mat-icon>
    </button>
  </ng-container>
</div>
